<template>
	<view>
		<!-- 商品列表 -->
		<view>
			<block v-for="(item, index) in goodsList" :key="index">
				<van-card
					:num="item.goods_number"
					:price="item.goods_price"
					:title="item.goods_name"
					:thumb="item.goods_small_logo"
					@tap="goGoodDetail(item.goods_id)"
				/>
			</block>
		</view>
		<view class="bottomline" :hidden="isover">---- 我也是有底线的 ----</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: '', // 用户传递的关键字
				cid: '', // 用户传递的商品分类的 id
				pagenum: 1,
				pagesize: 10,
				goodsList: [], // 商品列表数据
				total: 0, // 商品列表数据总条数
				isover: true, // 判断数据是否请求完成
				isloading: false // 判断数据是否正在加载中
			}
		},
		onLoad(options) {
			this.query = options.query || ''
			this.cid = options.cid || ''

			// 调用获取商品列表的数据方法
			this.getGoodsList()
		},
		// 监听用户下拉动作
		onPullDownRefresh () {
			this.pagenum = 1
			this.goodsList = []
			this.total = 0
			this.isover = true
			this.isloading = false

			this.getGoodsList(() => {
				uni.stopPullDownRefresh()
			})
		},

		// 监听用户上滑动作
		onReachBottom () {
			if (this.isloading) {
				return
			}
			// 这是为了防止用户把数据请求完成以后，持续上滑，所以做判断处理
			// 如果数据全部请求成功，不在发起网络请求，提升性能
			// 如何判断数据是否请求成功
			// 当前的页面 * 每页显示的条数 大于等于 总条数，说明数据请求完了，直接 return 即可
			if (this.pagenum * this.pagesize >= this.total) {
				this.isover = false
				return
			}
			this.pagenum++
			this.getGoodsList()
		},
		methods: {
			// 获取商品列表的数据
			async getGoodsList(callback) {
				// 用户正在请求数据
				this.isloading = true
				const res = await this.request({
					url: '/goods/search',
					data: {
						query: this.query,
						cid: this.cid,
						pagenum: this.pagenum,
						pagesize: this.pagesize
					}
				})

				if (res.meta.status !== 200) {
					return uni.showToast({
						title: '获取数据失败',
						duration: 2000,
						icon: 'none'
					})
				}

				this.goodsList = [...this.goodsList, ...res.message.goods]
				this.total = res.message.total
				this.isloading = false

				// 如果直接写这个方法，那么初始化数据，以及上拉以后都会触发
				// uni.stopPullDownRefresh()
				callback && callback()
			},

			// 跳转到商品详情
			goGoodDetail (goodsId) {
				uni.navigateTo({
					url: `/pages/goods_detail/main?goods_id=${goodsId}`
				})
			}
		}
	}
</script>

<style lang="less">
.bottomline {
	text-align: center;
	font-size: 26rpx;
	margin: 20rpx 0rpx;
}
</style>
